<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src='ajax.js'></script>
	<script>
		/*
			【注】
			.css  开发版本
			.min.css 上线版本

			bootstrap.css  别人写好的css样式	
		*/
		window.onload = function () {
			var oBtn = document.getElementById("btn1");
			var oT1 = document.getElementById("t1");
			oBtn.onclick = function () {
				$ajax({
					method: "get",
					url: "showStudents_json.php",
					success: function (result) {
						var arr = JSON.parse(result);
						var str = ``;
						for (var i = 0; i < arr.length; i++) {
							str += `<tr>
									<td>${arr[i].id}</td>
									<td>${arr[i].name}</td>
									<td>${arr[i].english}</td>
									<td>${arr[i].math}</td>
									<td>${arr[i].chinese}</td>
								</tr>`;
						}
						oT1.innerHTML = str;
					},
					error: function (msg) {
						alert(msg);
					}
				})
			}
		}

	</script>
</head>

<body>
	<div class='container'>
		<div class='panel panel-primary'>
			<div class='panel-heading'>
				<h2>获取学员成绩</h2>
			</div>
			<div class='panel-body'>
				<button id='btn1' class='btn btn-primary'>获取所有学员信息</button>
				<br>
				<br>
				<table class='table table-bordered table-hover'>
					<thead>
						<tr>
							<td>学员学号</td>
							<td>学员姓名</td>
							<td>英语成绩</td>
							<td>数学成绩</td>
							<td>语文成绩</td>
						</tr>
					</thead>
					<tbody id='t1'>

					</tbody>
				</table>
			</div>
			<div class='panel-footer'>
				<a href="insertStudents.html">新增学员成绩</a>
			</div>
		</div>
	</div>
</body>

</html>